<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>赛事详情</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link rel="stylesheet" href="css/ydui.css?rev=@@hash" />
    <link rel="stylesheet" href="css/demo.css" />
    <script src="js/ydui.flexible.js"></script>
    <style>
        .cell-left {
            width: 20%
        }
    </style>
</head>

<body>
    <section class="g-flexview" id="app" v-cloak>
        <sync-loader v-if="loading" :color="color"></sync-loader>
        <section class="g-scrollview" v-if="!loading">
            <div class="m-cell demo-small-pitch text_team_details">
                <div class="cell-item">
                    <div class="cell-left">赛事</div>
                    <div class="cell-right text_l" id="event">
                        {{details.matchName}}
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">模式</div>
                    <div class="cell-right text_l" id="pattern">
                        {{details.matchType}}
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">报名时间</div>
                    <div class="cell-right text_l" id="applyTime">
                        {{details.applyStartTime}}
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">比赛时间</div>
                    <div class="cell-right text_l" id="gameTime">
                        {{details.matchStartTime}}
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">参赛条件</div>
                    <div class="cell-right text_l" id="gamecondition">
                        {{details.applyFee}}
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">奖励说明</div>
                    <div class="cell-right text_l teamReferral" id="teaminfo" style="max-height:90px">
                        <p v-for="item in matchRewardList">第{{item.ranking}}名:{{item.awardValue*100}}%</p>
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">比赛类型</div>
                    <div class="cell-right text_l" id="gameType">
                        {{details.matchMode}}
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">参赛队员</div>
                    <div class="cell-right text_l" id="teamMember" style="justify-content: flex-end;">
                        （已报名{{details.applyPeopleNum}}/参赛{{details.matchPeopleNum}}）
                        <a href="javascript:;" v-if="this.userRole == 20 && this.showjudge == 1" class="btn btn-primary apply_btn margin_r5" id="J_Confirm" @click="judgeUserJoin">报名审核</a>
                    </div>
                </div>
            </div>
            <div class="m-button">
                <button type="button" id="saveBtn" @click="applyJoin" :style="{background: btnStyle}" class="btn-block btn-primary">{{btnStr}}</button>
            </div>

        </section>

    </section>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="js/ydui.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/vue-resource.js"></script>
    <script src="js/vue-spinner-master/dist/vue-spinner.js"></script>
    <script src="js/layer/layer.js"></script>

</body>
<script>
    /* 获取头部信息 */
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return r[2];
        }
    };
    var SyncLoader = VueSpinner.SyncLoader
    var app = new Vue({
        el: '#app',
        components: {
            'SyncLoader': SyncLoader
        },
        data: {
            id: GetQueryString('id'),
            token: GetQueryString('token'),
            userRole: GetQueryString('userRole'),
            appType:GetQueryString('appType'),
            teamId:GetQueryString('teamId'),
            teamName:GetQueryString('teamName'),
            showjudge:'0',
            loading: true,
            color: '#FF6C00',
            details: '',
            matchRewardList:[],
            canClick:false,
            btnStyle:'#ccc',
            btnStr:'',
        },
        methods: {
            get: function() {
                this.$http({
                    method: "post",
                    url: "/appMatch/matchDetail",
                    data: {
                        token: this.token,
                        id: this.id,
                    },
                    emulateJSON: true
                }).then(function(res) { // 访问成功后执行
                    this.loading = false;
                    console.log(res);
                    if(res.data.code =='0') {
                        layer.msg(res.data.message);
                        this.details = res.data.data;
                        this.matchRewardList = res.data.data.matchRewardList;
                        var state = this.details.matchState;
                        if (state == '10') {
                            this.btnStr = '未开始';
                        } else if (state == '20') {
                            this.btnStr = '未开始';
                        } else if (state == '30') {
                            this.showjudge = '1';
                            this.btnStr = '报名中 ';
                        } else if (state == '40') {
                            this.showjudge = '1';
                            this.btnStr = '报名中 ';
                        } else if (state == '50') {
                            this.btnStr = '比赛中';
                        } else if (state == '60') {
                            this.btnStr = '战绩确认中';
                        } else if (state == '70') {
                            this.btnStr = '已结束';
                        } else if (state == '80') {
                            this.btnStr = '已取消';
                        }
                        if (this.userRole == '10' && state == '30') {
                            var userState = this.details.userState;
                            if(userState == undefined || userState == ''){
                                this.btnStr = '申请加入';
                                //能点击
                                this.btnStyle = '#FF6C00';
                                this.canClick = true;
                            }else if(userState == '10'){
                                this.btnStr = '待审核';
                            }else if(userState == '20'){
                                this.btnStr = '已审核';
                            }else{
                                this.btnStr = '申请加入';
                                //能点击
                                this.btnStyle = '#FF6C00';
                                this.canClick = true;
                            }
                        }
                    }
                }, function(error) { // 访问失败执行
                    console.log(error);
                    layer.msg('接口返回失败');
                    this.loading = false;
                })
            },
            applyJoin: function() {
                if(!this.canClick){
                    return;
                }
                var that = this;
                layer.confirm('确定申请《'+decodeURI(that.teamName)+'》战队的赛事么?', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    that.$http({
                        method: "post",
                        url: "/appPubgUser/applyJoinMatch",
                        data: {
                            token: that.token,
                            teamId:that.teamId,
                            matchId:that.id
                        },
                        emulateJSON: true
                    }).then(function(res) { // 访问成功后执行
                        layer.msg(res.data.message);
                        if(res.data.code =='0') {
                            if(this.appType == 'ios'){
                                window.webkit.messageHandlers.reloadPage.postMessage('');
                            }else{
                                window.android.reloadPage('');
                            }
                        }else{
                            layer.msg(res.data.message);
                        }
                    }, function(error) { // 访问失败执行
                        layer.msg('接口返回失败');
                    })
                });
            },
            judgeUserJoin:function(){
                if(this.appType == 'ios'){
                    window.webkit.messageHandlers.goJoinMatch.postMessage(this.id);
                }else{
                    window.android.goJoinMatch(this.id);
                }
            },
        },

        mounted: function() {
            this.$nextTick(function() {
                this.get();
            })
        }
    })
</script>

</html>